<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../img/com/logo.png">
    <link rel="stylesheet" href="../asserts/css/normalize.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/pageCom.css">
    <style>
        .bottom {
            flex: .5;
        }

        .top {
            flex: 3;
            display: flex;
        }

        .top-l {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .top-r {
            flex: 2;
            display: flex;
            flex-direction: column;
        }

        .right-top, .right-bottom {
            display: flex;
            flex: 1;
        }

        .right-top > div, .right-bottom > div {
            flex: 1;
        }
        #table1 thead tr td{
            width: 20%;
            text-align: center;
            padding: .5rem 0rem;

        }
        #table tbody tr td{
            width: 20%;
            text-align: center;
            padding: .5rem 0;
        }
        .mySelect > .myOptionBox{
        	overflow-y: auto;
        }
    </style>
</head>
<body id="03_01xinyongfengxian" data-title="信用风险">
<div class="container">
    <div class="top">
        <div class="top-l">
            <div class="trade-market">
                <header class="pageHeader">
                    <div class="inputGroup">
                        <label>筛选条件:</label>
                        <div class="mySelect" id="jingzhenglizhibiao">
                            <div class="myOption selected"><span class="text"></span><span class="icon"></span></div>
                            <ul class="myOptionBox">
                                <li class="myOption selected">海尔小额贷款</li>
                                <li class="myOption">蚂蚁小额贷款</li>
                                <li class="myOption">汇金小额贷款</li>
                                <li class="myOption">西岸小额贷款</li>
                                <li class="myOption">中鸿小额贷款</li>
                            </ul>
                        </div>
                    </div>
                </header>
            </div>
            <div class="chartBox ec001">
                <div class="chartTitle">
                    <h3>指标排名</h3>
                </div>
                <div class="chartContent">
                    <header>
                        <div class="btnGroup">
                            <button class="active">次数</button>
                            <button>累计放款额-个人</button>
                            <br>
                            <button>累计放款额-企业</button>
                            <button>贷款余额-企业</button>
                            <button>贷款余额-个人</button>
                        </div>
                    </header>
                    <div class="chartBody">
                        <div id="ec001"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="top-r">
            <div class="right-top">
                <div class="chartBox ec002">
                    <div class="chartTitle">
                        <h3>不良率</h3>
                    </div>
                    <div class="chartContent">
                        <header>
                            <div class="inputGroup">
                                <label>筛选条件:</label>
                                <div class="mySelect" id="jingzhenglizhibiao2">
                                    <div class="myOption selected"><span class="text"></span><span class="icon"></span>
                                    </div>
                                    <ul class="myOptionBox myOptionBoxObjBlv" style="overflow: auto;height: 3.5rem;">
                                        <li class="myOption selected">担保方式</li>
                                        <li class="myOption">贷款期限</li>
                                        <li class="myOption">贷款用途</li>
                                        <li class="myOption">企业规模</li>
                                        <li class="myOption">客户进件年龄</li>
                                    </ul>
                                </div>
                            </div>
                        </header>
                        <div class="chartBody">
                            <div id="ec002"></div>
                        </div>
                    </div>
                </div>
                <div class="chartBox ec003">
                    <div class="chartTitle">
                        <h3>迁徙率</h3>
                    </div>
                    <div class="chartContent">
                        <header>
                            <div class="inputGroup">
                                <label>筛选条件:</label>
                                <div class="mySelect" id="jingzhenglizhibiao3">
                                    <div class="myOption selected"><span class="text"></span><span class="icon"></span>
                                    </div>
                                    <ul class="myOptionBox myOptionBoxObjQxl">
                                        <li class="myOption selected">M1</li>
                                        <li class="myOption">M2</li>
                                        <li class="myOption">M3</li>
                                    </ul>
                                </div>
                            </div>
                        </header>
                        <div class="chartBody">
                            <div id="ec003"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="right-bottom">
                <div class="chartBox ec004">
                    <div class="chartTitle">
                        <h3>集中度</h3>
                    </div>
                    <div class="chartContent">
                        <header>
                            <div class="inputGroup">
                                <label>筛选条件:</label>
                                <div class="mySelect" id="jingzhenglizhibiao4">
                                    <div class="myOption selected"><span class="text"></span><span class="icon"></span>
                                    </div>
                                    <ul class="myOptionBox myOptionBoxObjJzd">
                                        <li class="myOption selected">开户人数集中度</li>
                                        <li class="myOption">时间集中度</li>
                                        <li class="myOption">地域集中度</li>
                                        <li class="myOption">行业集中度</li>
                                    </ul>
                                </div>
                            </div>
                        </header>
                        <div class="chartBody">
                            <div id="ec004_ConcentrationDegree"></div>
                        </div>
                    </div>
                </div>
                <div class="chartBox ec005">
                    <div class="chartTitle">
                        <h3>贷款收息率与逾期贷款损失率</h3>
                    </div>
                    <div class="chartContent">
                        <div class="chartBody">
                            <div id="ec005"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="chartBox ec002">
            <div class="chartTitle">
                <h3>信用风险列示</h3>
            </div>
            <div class="chartContent">
                <table id="table1" align="center" width="100%">
                    <thead style="background: #00abde;font-size: 0.9rem;">
                    <tr><td>报警时间</td><td>预警指标</td><td>预警原因</td><td>平台名称</td><td>业务详述</td></tr>
                    </thead>
                </table>
                <div style="overflow-x: auto; overflow-y: auto; height: 180px; width:100%;">
                    <table id="table" width="100%" height="180px">
                        <tbody>
                        <tr><td>20180428</td><td>信用风险</td><td>不良率</td><td>重庆海尔小额贷款有限公司</td><td><a href="05_02fengxianshijianchakan.html">查看</a></td></tr>
                        <tr><td>20180426</td><td>信用风险</td><td>不良率</td><td>蚂蚁小额贷款有限公司</td><td><a href="05_02fengxianshijianchakan.html">查看</a></td></tr>
                        <tr><td>20180420</td><td>信用风险</td><td>不良率</td><td>西岸小额贷款有限公司</td><td><a href="05_02fengxianshijianchakan.html">查看</a></td></tr>
                        <tr><td>20180412</td><td>信用风险</td><td>不良率</td><td>汇金小额贷款有限公司</td><td><a href="05_02fengxianshijianchakan.html">查看</a></td></tr>
                        <tr><td>20180405</td><td>信用风险</td><td>不良率</td><td>汇金小额贷款有限公司</td><td><a href="05_02fengxianshijianchakan.html">查看</a></td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../asserts/js/echarts-4.0.js"></script>
<script src="../asserts/js/jquery-2.2.4.js"></script>
<script src="../js/pageCom.js"></script>
<script src="../js/chartsCom.js"></script>
<script>
    var allCharts = [];
    $(function () {

        //指标排名
        var data = [{value:12,name:'蚂蚁小额贷款'},{value:13,name:'汇金小额贷款'},{value:14,name:'西岸小额贷款'},{value:15,name:'中鸿小额贷款'},{value:16,name:'海尔小额贷款'},]
        oneBar(data);
        $(".btnGroup>button").click(function () {
            var type = $(".btnGroup .active").text();
            var data = [];
            if(type == '次数'){
                data = [{value:12,name:'蚂蚁小额贷款'},{value:13,name:'汇金小额贷款'},{value:14,name:'西岸小额贷款'},{value:15,name:'中鸿小额贷款'},{value:16,name:'海尔小额贷款'},]
            }
            else if(type == '累计放款额-个人'){
                data = [{value:3, name:'60后'},{value:6, name:'70后'},{value:16, name:'80后'},{value:20, name:'90后'},{value:10, name:'00后'}];
            }
            else if(type == '累计放款额-企业'){
                data = [{value:10, name:'A'},{value:15, name:'B'},{value:20, name:'C'},{value:12, name:'D'},{value:18, name:'E'}];
            }
            else if(type == '贷款余额-企业'){
                data = [{value:11, name:'A'},{value:13, name:'B'},{value:15, name:'C'},{value:12, name:'D'},{value:17, name:'E'}];
            }
            else{
                data = [{value:13,name:'蚂蚁小额贷款'},{value:15,name:'汇金小额贷款'},{value:12,name:'西岸小额贷款'},{value:11,name:'中鸿小额贷款'},{value:10,name:'海尔小额贷款'},]

            }
            oneBar(data);
        });
        function oneBar(data){
            var ec001 = echarts.init($("#ec001")[0]);
            ec001.setOption(opt_bar_horizon);
            ec001.setOption({
                grid: {
                    left: "22%",
                    right: "16%",
                    top: "15%"
                },
                xAxis: {
                    type: 'value',
                    name: '次数'
                },
                yAxis: {
                    name: '市场',
                    data: ['中鸿小额贷款', '蚂蚁小额贷款', '汇金小额贷款', '西岸小额贷款', '海尔小额贷款']
                },
                series: [{
                    data: data,
                    type: 'bar',
                    barWidth: "60%"
                }]
            });
        }



        var ec002 = echarts.init($("#ec002")[0]);
        ec002.setOption(opt_line);
        ec002.setOption({
        	tooltip: {
				trigger: 'axis',
                position: function(point, params, dom) {
                    return [point[0], '15%'];
                },
				extraCssText:'font-size:12px;line-height:normal;'		
			},
            grid: {
                top: "24%",
                right:'16%',
                bottom: '25%'
            },

            xAxis: {
                name: '月份',
                data: [1,2,3,4,5,6]
            },
            yAxis: {
                name: '%',
                interval:4
            },
            series: [
                {
                    name: '保证/信用',
                    type: 'line',
                    symbol: 'circle',
                    data: [2, 3, 5, 6, 5,7],
                    areaStyle: lineAreaStyle(0)

                },
                {
                    name: '抵质押',
                    type: 'line',
                    symbol: 'circle',
                    data: [1, 5, 2, 5, 3, 2, 0],
                    areaStyle: lineAreaStyle(1)

                }

            ]
        });

        var ec003 = echarts.init($("#ec003")[0]);
        ec003.setOption(opt_line);
        ec003.setOption({
        	tooltip: {
				trigger: 'axis',
                position: function(point, params, dom) {
                    return [point[0], '15%'];
                },
				extraCssText:'font-size:12px;line-height:normal;'		
			},
            grid: {
                top: "24%",
                right:'16%',
                bottom: '25%'
            },
            legend: {
                show: false
            },
            xAxis: {
                name: '月份',
                data: [1,2,3,4,5,6]
            },
            yAxis: {
                name: '%',
                interval:15
            },
            series: [
                {
                    name: '最高',
                    type: 'line',
                    symbol: 'circle',
                    data: [60, 61, 69, 72, 75, 77, 80],
                    areaStyle: lineAreaStyle(0)
                }
            ]

        });

        //热力图
        var ec004 = echarts.init($("#ec004_ConcentrationDegree")[0]);
        var data = [
            [[1600, 1500, 1700, '山东', 1990], [600, 500, 700, '江苏', 1990]],
            [[1200, 1100, 1300, '山东', 2015], [200, 100, 300, '江苏', 2015]]
        ];
        ec004.setOption(opt_scatter)
        ec004.setOption(
            {
	        	tooltip: {
					trigger: 'axis',
	                position: function(point, params, dom) {
	                    return [point[0], '15%'];
	                },
					extraCssText:'font-size:12px;line-height:normal;'		
				},
                grid: {
                    top: "24%",
                    right:'16%',
                    bottom: '25%'
                },
                legend: {
                    show: false
                },
                xAxis: {
                    name: '月份',
                    data: [1,2,3,4,5,6]
                },
                yAxis: {
                    name: '%',
                },
                series: [
                    {
                        name: '最高',
                        type: 'line',
                        symbol: 'circle',
                        data: [11, 11, 15, 13, 18, 16, 10],
                        areaStyle: lineAreaStyle(0)
                    }
                ]
            });
        var ec005 = echarts.init($("#ec005")[0]);
        ec005.setOption(opt_line);
        ec005.setOption({
        	tooltip: {
				trigger: 'axis',
                position: function(point, params, dom) {
                    return [point[0], '15%'];
                },
				extraCssText:'font-size:12px;line-height:normal;'		
			},
            grid: {
                top: "25%",
                right:'16%',
                bottom:"25%"
            },
            legend: {
                show: false
            },
            xAxis: {
                name: '月份',
                data: [1,2,3,4,5,6]
            },
            yAxis:[ {
                name: '%',
            },
                {
                    name: '%',
                    axisLine: { //坐标轴
                        lineStyle: {
                            color: "#369"
                        }
                    },
                    splitLine: { //分割线
                        lineStyle: {
                            color: "#369"
                        }
                    },
                }
            ],
            series: [
                {
                    name: '贷款收息率',
                    type: 'line',
                    symbol: 'circle',
                    data: [100, 100, 100, 100, 100, 99, 100],
                    areaStyle: lineAreaStyle(0)
                },
                {
                    name: '逾期贷款损失率',
                    type: 'line',
                    symbol: 'circle',
                    data: [1, 5, 2, 5, 3, 2, 0],
                    areaStyle: lineAreaStyle(1)
                }
            ]
        });


        //本页所有图表
        allCharts = [ec001, ec002, ec003, ec004, ec005];

    });


</script>
<script type="text/javascript">
	$(function(){
		ulHeight(".myOptionBoxObjBlv");
		ulHeight(".myOptionBoxObjQxl");
		ulHeight(".myOptionBoxObjJzd");
		function ulHeight(obj){
			var ulH = $(obj).height();
			var ulParentH = $(obj).parents("header").height();
			var ulParentsH = $(obj).parents(".chartContent").height();
			var val = ulParentsH - ulParentH;
			if(ulH > val){
				$(obj).height(val);
			}
		}		
	})
</script>
</body>
</html>
